<template>
  <div id="login">
    <div id="login-box">
      <text>用户登录</text>
      <input v-model="loginData.name" type="text" placeholder="用户名">
      <input v-model="loginData.pass" type="password" placeholder="密码">
      <wxc-button text="登录" :btnStyle="{width:'80%'}" @wxcButtonClicked="login"></wxc-button>
    </div>
    <wxc-loading :show="loging"></wxc-loading>
  </div>
</template>
<style>
  #login{
    justify-content:center;
    align-items:center;
  }
  #login-box{
    height:50vh;
    width:80%;
    border-radius:10px;
    background-color:#D2F5FF;
    justify-content:space-around;
    align-items:center;
  }
  #login-box .weex-text{
    text-align:center;
    padding:10px 0;
  }
  #login-box input{
    width:80%;
    padding:5px 10px;
    margin:5px;
    border-radius:5px;
    height:35px;
    line-height:35px;
  }
</style>
<script>
  import { WxcButton, WxcLoading } from 'weex-ui'
  import {Auth} from './http'
  const modal = weex.requireModule('modal');
  export default {
    data: () => ({
      loginData: {
        name: '',
        pass: ''
      },
      loging: false
    }),
    methods: {
      login () {
        this.loging = true;
        const self = this;
        Auth.login(this.loginData).then(response => {
          if (response.data.success) {
            self.loging = false;
            return this.$router.replace('/home')
          } else {
            self.loging = false;
            modal.toast({message: response.data.msg, duration: 2})
          }
        }).catch(error => {
          self.loging = false;
          modal.toast({message: error, duration: 2})
        })
      }
    },
    components: { WxcButton, WxcLoading },
    created () {
      if (Auth.isLogin()) {
        this.$router.push('/home')
      }
    }
  }
</script>